<route lang="json5">
{
  style: {
    navigationBarTitleText: '我的卡卷',
  },
}
</route>
<script setup lang="ts">
import { ref } from 'vue'
let list = ref([
  { id: 0, name: '全部' },
  { id: 1, name: '茶饮卷' },
  { id: 2, name: '酒屋卷' },
])
let data = ref([
  {
    id: 0,
    img: '../../../../static/img/13.png',
    name: '生日免费卷',
    tmin: '有效期至 2024-7-1 20:00',
    fang: true,
  },
  {
    id: 1,
    img: '../../../../static/img/14.png',
    name: '生日免费卷',
    tmin: '有效期至 2024-7-1 20:00',
    fang: true,
  },
  {
    id: 2,
    img: '../../../../static/img/12.png',
    name: '生日免费卷',
    tmin: '有效期至 2024-7-1 20:00',
    fang: false,
  },
])
let datas = ref([
  {
    id: 0,
    img: '../../../../static/img/13.png',
    name: '生日免费卷',
    tmin: '有效期至 2024-7-1 20:00',
    fang: true,
  },
  {
    id: 1,
    img: '../../../../static/img/14.png',
    name: '生日免费卷',
    tmin: '有效期至 2024-7-1 20:00',
    fang: true,
  },
  {
    id: 2,
    img: '../../../../static/img/12.png',
    name: '生日免费卷',
    tmin: '有效期至 2024-7-1 20:00',
    fang: false,
  },
])
let tab = ref(0)
let tabae = (id: number) => {
  tab.value = id

  if (id == '0') {
    datas.value = data.value
  } else if (id == '1') {
    datas.value = data.value.filter((item) => {
      return item.fang == true
    })
  } else if (id == '2') {
    datas.value = data.value.filter((item) => {
      return item.fang == false
    })
  }
}
</script>
<template>
  <view calss="cardroll">
    <view class="cardroll-box">
      <input type="text" placeholder="请输入兑换码" class="inp" />
      <button class="but">兑换</button>
    </view>
    <view class="cardroll-box2">查看兑换规则</view>
    <view class="cardroll-box3">
      <view
        :class="tab == item.id ? 'active' : ''"
        v-for="item in list"
        :key="item.id"
        @click="tabae(item.id)"
      >
        {{ item.name }}
      </view>
    </view>
    <view class="cardroll-box4">
      <view class="cardroll-top" v-for="item in datas" :key="item.id">
        <view class="cardroll-tops">
          <img :src="item.img" alt="" class="cardroll-img" />
          <view>
            <view class="cardroll-ls">{{ item.name }}</view>
            <view class="cardroll-lx">{{ item.tmin }}</view>
          </view>
        </view>
        <view class="cardroll-topx">查看详情</view>
      </view>
    </view>
    <view class="cardroll-botton">
      <view>历史卡卷</view>
      |
      <view>赠送记录</view>
      |
      <view>第三方收益</view>
    </view>
  </view>
</template>
<style scoped>
@import './index.css';
</style>
